<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <f:view contentType="text/html" locale="en">
        <h:head>
            <title>CkEditor Test</title>
        </h:head>
        <h:body>
            <h:form id="toolbar">
                <rich:toolbar id="topToolBar">                                
                    <rich:toolbarGroup id="navButtons">
                        <a4j:commandButton id="firstButton" disabled="#{testbean.currentPage==1}" render=":pages :toolbar:topToolBar" value="First" actionListener="#{testbean.loadFirstPage}" title="First Page"/>
                        <a4j:commandButton id="prevButton" disabled="#{testbean.currentPage==1}" render=":pages :toolbar:topToolBar" value="Prev" actionListener="#{testbean.loadPreviousPage}" title="Previous Page"/>
                        <ui:repeat value="#{testbean.buttons}" var="button">
                            <a4j:commandButton value="#{button}" disabled="#{testbean.currentPage eq button}" render=":pages :toolbar:topToolBar" actionListener="#{testbean.loadSpecificPage}" title="Page #{button}">
                                <f:param name="page" value="#{button}"/>
                            </a4j:commandButton>
                        </ui:repeat>
                        <a4j:commandButton id="nextButton" disabled="#{testbean.currentPage==3}" value="Next" render=":pages :toolbar:topToolBar" actionListener="#{testbean.loadNextPage}" title="Next Page"/>
                        <a4j:commandButton id="lastButton" disabled="#{testbean.currentPage==3}" value="Last" render=":pages :toolbar:topToolBar" actionListener="#{testbean.loadLastPage}" title="Last Page"/>
                    </rich:toolbarGroup>                                                
                </rich:toolbar>            
            </h:form>
            <a4j:outputPanel layout="block" id="page">
                <h:form id="pages">
                    <a4j:outputPanel layout="block" rendered="#{testbean.currentPage eq 1}" id="p1">
                        <h:outputText value="Form Page 1"/>
                        <rich:inplaceInput/>
                    </a4j:outputPanel>
                    <a4j:outputPanel layout="block" rendered="#{testbean.currentPage eq 2}" id="p2">
                        <h:outputText value="Form Page 2"/>
                        <rich:editor value="#{testbean.words}">                            
                            <a4j:ajax event="dirty" listener="#{testbean.handleResponse}">
                                <a4j:attachQueue requestDelay="1000" />
                            </a4j:ajax>
                            <a4j:ajax event="change" listener="#{testbean.handleResponse}"/>
                        </rich:editor>
                    </a4j:outputPanel>
                    <a4j:outputPanel layout="block" rendered="#{testbean.currentPage eq 3}" id="p3">
                        <h:outputText value="Form Page 3"/>
                    </a4j:outputPanel>
                    <a4j:outputPanel layout="block" rendered="#{testbean.currentPage eq 4}" id="p4">
                        <h:outputText value="Form Page 4"/>
                        <rich:inplaceInput/>
                    </a4j:outputPanel>
                </h:form>
            </a4j:outputPanel>        
        </h:body>
    </f:view>
</html>

